<template>
<div class="myscontain">
  <div class="myscard">
    <el-tabs @tab-click="TabsChanges" tab-position="left" style="height: 100%" class="demo-tabs">
      <el-tab-pane label="我的教练">
        <div id="mycoach" class="mycoach">
          <p>教练号：<span style="padding: 1px 4px;font-weight: 600">{{coachinfor.id}}</span></p>
          <p>姓名：{{coachinfor.name}}</p>
          <p>性别：{{coachinfor.sex}}</p>
          <p>年龄：{{coachinfor.age}}</p>
          <p>手机号：{{coachinfor.mobile}}</p>
          <p>负责场地，科目：<span style="padding: 1px 4px;font-weight: 600">{{coachinfor.place}}</span>
            <span style="margin-left: 10px;padding: 1px 4px;font-weight: 600">{{coachinfor.subject}}</span>
          </p>
          <button class="mysbut" @click="coachpj">
            <span class="label">去评价</span>
            <span class="icon"><el-icon color="white" :size="26"><Right /></el-icon></span>
          </button>
        </div>
        <div id="pjcoach" class="pjcoach" style="display: none">
          <div class="pjcoach_box">
            <div style="text-align: center">
              <el-icon :size="20" style="float: left" class="pjcoach_box_icon" @click="backmycoach"><Back /></el-icon>
              教练号：<span>{{coachinfor.id}}</span>
              <span style="margin-left: 10px">{{coachinfor.name}}</span>：教练名
            </div>
            <div><el-input
                v-model="pjcontent"
                :rows="2"
                type="textarea"
                placeholder="你的评价..."
            /></div>
            <div>是否匿名：<el-switch
                v-model="facelessValue"
                class="mb-2"
                active-text="是"
                inactive-text="否"
                active-value="1"
                inactive-value="0"
            /></div>
            <div>评价分：<el-rate
                v-model="evalValue"
                text-color="#ff9900"
            /></div>
          </div>
          <button class="mysbut" @click="subcoachpj">
            <span class="label">提交</span>
            <span class="icon"><el-icon color="white" :size="26"><Right /></el-icon></span>
          </button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的练车预约">
        <el-empty description="暂无预约" v-if="!isempty1"/>
        <div class="scrollbar-demo-item" v-for="(item,index) in myorderpractise" :key="index" style="position: relative" v-if="isempty1">
          <header><p style="font-weight: 600">我的预约</p>
            <span v-if="item.status === 1">预约中</span>
            <span v-else style="color: #97a8be">预约到期</span>
          </header>
          <div><p>练车场地</p>
            <div style="flex:1;border-bottom: 1px solid #e7e7e7"></div>
            <span>{{item.place}}</span></div>
          <div><p>练习科目</p>
            <div style="flex:1;border-bottom: 1px solid #e7e7e7"></div>
            <span>{{ item.subject }}</span></div>
          <div><p>时间段</p>
            <div style="flex:1;border-bottom: 1px solid #e7e7e7"></div>
            <span>{{ item.intervalTime }}</span></div>
          <div><p>到期时间</p>
            <div style="flex:1;border-bottom: 1px solid #e7e7e7"></div>
            <span>{{ item.finishTime }}</span></div>
          <div v-if="item.status === 1" class="mypractisebut">
            <button class="myprabut" @click="closePraorder(item.orderPractiseId)">取消预约</button>
          </div>
        </div>
        <div style="position: absolute;bottom: 0;height: 40px" >
          <el-pagination
              v-model:currentPage="currentPage1"
              :page-size="pagesize"
              background
              layout="total, prev, pager, next"
              :total="stutotal"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的考试预约">
        <div class="mycoach" v-if="isempty">
          <div><p>考试科目</p><p>{{myexamorder.subject}}</p></div>
          <div><p>考试编号</p><p>{{myexamorder.id}}</p></div>
          <div><p>考试地点</p><p>{{myexamorder.place}}</p></div>
          <div><p>考试开始时间</p><p>{{myexamorder.date}}</p></div>
          <button class="mysbut" v-show="Gtime<new Date(myexamorder.date).getTime()" @click="closeExamorder(myexamorder.id,myexamorder.peoplecurrent)">
            <span class="label">取消预约</span>
          </button>
          <div v-show="Gtime>=new Date(myexamorder.date).getTime()" class="TSQK">
            <p>请准时参加考试，如有特殊情况无法正常参加考试，请及时联系管理员。</p></div>
        </div>
        <el-empty description="暂无预约" v-if="!isempty"/>
      </el-tab-pane>
      <el-tab-pane label="我的成绩单">
        <div>
          <button class="mystbut" @click="SYCJD">所有成绩单</button>
          <button class="mystbut" @click="HQZXexam">最新成绩单</button>
        </div>
        <el-empty description="暂无成绩" v-show="isempty2"/>
        <el-scrollbar style="width: 100%" v-if="displatValue" >
          <div v-for="(item,index) in myexamresult" :key="index">
            <div v-if="item.grade" class="myscrollbar-demo-item">
              <el-descriptions title="" :column="3" border style="width: 100%;height: 100%">
                <el-descriptions-item
                    label="考试编号"
                    label-align="right"
                    align="center"
                    label-class-name="my-label"
                    class-name="my-content"
                >
                  <p style="color: #4da9ff;font-weight: 600">{{item.examId}}</p>
                </el-descriptions-item>
                <el-descriptions-item label="学号" label-align="right" align="center">
                  <p style="color: #4da9ff;font-weight: 600">{{item.userId}}</p>
                </el-descriptions-item>
                <el-descriptions-item label="成绩" label-align="right" align="center">
                  <p v-if="item.grade>=90" style="color: #4da9ff;font-weight: 600">{{item.grade}}</p>
                  <p v-else style="font-weight: 600;color: #ff5c5c">{{item.grade}}</p>
                </el-descriptions-item>
                <el-descriptions-item label="发布时间" label-align="right" align="center">
                  <p style="color: #4da9ff;font-weight: 600">{{item.date}}</p>
                </el-descriptions-item>
                <el-descriptions-item label="成绩评判" label-align="right" align="center">
                  <p v-if="item.grade>=90" style="font-weight: 600;color: #4da9ff">成绩合格</p>
                  <p v-else style="font-weight: 600;color: #ff5c5c">成绩不合格</p>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-scrollbar>
        <div v-else class="myZXexam">
          <div v-show="isZX">
            <div class="myZXexam_img">大头照</div>
            <ul class="myZXexam_info">
              <li>
                <div>
                  学员号<p style="float: right">{{Loginer.userId}}</p>
                </div>
                <div>
                  教练号<p style="float: right">{{Loginer.coachId}}</p>
                </div>
              </li>
              <li>
                <div>
                  姓名<p style="float: right">{{Loginer.name}}</p>
                </div>
                <div>
                  性别<p style="float: right">{{Loginer.sex}}</p>
                </div>
                <div>
                  年龄<p style="float: right">{{Loginer.age}}</p>
                </div>
              </li>
              <li>
                <div>
                  手机号<p style="float: right">{{Loginer.mobile}}</p>
                </div>
              </li>
            </ul>
          </div>
          <div v-show="isZX">
            <ul class="KSinfo">
              <li>
                <div>
                  考试编号<p>{{zxexamresult.id}}</p>
                </div>
                <div>
                  考试科目<p>{{zxexamresult.subject}}</p>
                </div>
                <div>
                  考试场地<p>{{zxexamresult.place}}</p>
                </div>
              </li>
              <li>考试时间<p>{{zxexamresult.date}}</p></li>
              <li>
                <div>
                  考试分数<p>{{ZXCJD.grade}}</p>
                </div>
                <div>
                  考试评判<p v-if="ZXCJD.grade>=90">成绩合格</p><p v-else style="color: red">成绩不合格</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</div>
</template>

<script setup>
import {ref} from "vue";
import {Right ,Back} from '@element-plus/icons-vue'
import {useStore} from "vuex";
import {getStudentById} from "@/api/student";
import {getTeacherById} from "@/api/teacher";
import {ElMessage} from "element-plus";
import {deleteOrderPraById, getOrderPractiseById} from "@/api/order_practise";
import {InsertEvaluation} from "@/api/evaluation";
import {getExamById, getOneExamById, UpdateExam} from "@/api/exam";
import {deleteExanResultBy, getExamResultById} from "@/api/exam_result";
const store = useStore()
const LoginI = store.getters.Id
const Loginer = JSON.parse(localStorage.getItem('loginer'))

const pjcontent = ref('')
const facelessValue = ref(0)
const evalValue = ref(0)
const isempty = ref(true)
const isempty1 = ref(true)
const isempty2 = ref(false)


const currentPage1 = ref(1)
const pagesize = ref(2)
const stutotal = ref(0)

const coachinfor = ref({})
const myorderpractise = ref({})
const myexamorder = ref({})
const myexamresult = ref({})
const zxexamresult = ref({})

const displatValue = ref(true)
const ZXCJD = ref({})
const isZX = ref(false)
const num = ref(0)

//重置信息
const respjxx = () =>{
  pjcontent.value = ''
  facelessValue.value = 0
  evalValue.value = 0
}
// 获取当前时间
const UpData=(myday)=>{
  const nowDate = new Date();
  const targetday = nowDate.getTime() + 1000 * 60 * 60 * 24 * myday
  nowDate.setTime(targetday)
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}
const datenow = ref(UpData(0))
const Gtime = new Date(UpData(3)).getTime()

//我的教练信息
getStudentById(LoginI).then(res=>{
  if (res.code === 20041){
    getTeacherById(res.data.coachId).then(re=>{
      if (re.code === 20041){
        coachinfor.value = re.data
      }else {
        ElMessage({
          message: '暂无已选教练',
          type: 'info',
        })
      }
    })
  }
})

//预约练车信息
const getorderplacelist = async () =>{
  await getOrderPractiseById({pageNum:currentPage1.value,pageSize:pagesize.value,id:LoginI}).then(res=>{
    if (res.code === 20041){
      myorderpractise.value = res.data.list
      stutotal.value = res.data.total
      isempty1.value = true
    }else {
      isempty1.value = false
    }
  })
}
//我的预约考试信息
const getMyExamOrder = async () =>{
  await getExamById(LoginI).then(res=>{
    if (res.code === 20041){
      myexamorder.value = res.data
      isempty.value = true
    }else {
      isempty.value = false
    }
  })
}
//我的成绩单
const getMyExamReasults = async () =>{
  await getExamResultById({pageNum:1,pageSize:99999,id:LoginI}).then(res=>{
    if (res.code === 20041){
      myexamresult.value = res.data.list
      num.value = res.data.total
      ZXCJD.value = res.data.list[0]
      isempty2.value = false
    }else {
      myexamresult.value = res.data.list
      isempty2.value = true
    }
  })
}
//所有成绩单
const SYCJD = () =>{
  displatValue.value = true
}

//我的最新成绩单的考试信息
const HQZXexam = async () =>{
  displatValue.value = false
  if (num.value != 0){
    isZX.value = true
    await getOneExamById(ZXCJD.value.examId).then(res=>{
      zxexamresult.value = res.data
    })
  }else {
    isZX.value = false
  }

}


//去评价
const coachpj = () =>{
  var coachinfo = document.getElementById('mycoach')
  var evalcoach = document.getElementById('pjcoach')
  coachinfo.style.display = 'none'
  evalcoach.style.display = 'block'
}
//提交评价
const subcoachpj = async () =>{
  var coachinfo = document.getElementById('mycoach')
  var evalcoach = document.getElementById('pjcoach')
  if (pjcontent.value === ''||pjcontent.value === null){
    ElMessage.warning('评价内容为空！')
  }else {
    await InsertEvaluation({
      userId:LoginI,
      coachId:coachinfor.value.id,
      grade:evalValue.value,
      content:pjcontent.value,
      faceless:facelessValue.value,
      date:datenow.value}).then(res=>{
      if (res.code === 20011){
        ElMessage.success('评价成功')
        coachinfo.style.display = 'block'
        evalcoach.style.display = 'none'
      }else {
        ElMessage.error(res)
      }
    })
    respjxx()
  }


}
//返回
const backmycoach = () =>{
  var coachinfo = document.getElementById('mycoach')
  var evalcoach = document.getElementById('pjcoach')
  coachinfo.style.display = 'block'
  evalcoach.style.display = 'none'
}

const handleCurrentChange = () =>{
  getorderplacelist()
}
const TabsChanges = (tab) =>{
  if (tab.index === '1'){
    getorderplacelist()
  }else if (tab.index === '2'){
    getMyExamOrder()
  }else if (tab.index === '3'){
    getMyExamReasults()
  }
}
//练车预约取消
const closePraorder = async (id) =>{
  await deleteOrderPraById(id).then(res=>{
    if (res.code === 20021){
      ElMessage.success('取消成功')
    }else {
      ElMessage.error('取消失败')
    }
    getorderplacelist()
  })
}
//考试取消预约
const closeExamorder = async (id,num) =>{
  await deleteExanResultBy({userId:LoginI,examId:id}).then(res=>{
    if (res.code === 20021){
      UpdateExam({id: id,peoplecurrent:(parseInt(num)-1)}).then(re=>{
        if (re.code === 20031){

        }else {
          ElMessage({
            message: '取消成功,修改预约人数失败',
            type: 'warning',
          })
        }
      })
      ElMessage.success('取消成功')
    }else {
      ElMessage.error('取消失败')
    }
    getMyExamOrder()
  })
}


</script>

<style scoped>

.TSQK{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0);
  white-space: nowrap;
  border: 1px solid #817777;
  padding: 2px 5px;
}
.TSQK>p{
  font-size: 17px;
  color: #4da9ff;

}
.myZXexam{
  flex: 1;
  width: 98%;
  display: flex;
  flex-direction: column;
}
.myZXexam>div:first-child{
  flex: 0.4;
  display: flex;
  border: 1px solid #000000;
  border-bottom: none;
}
.myZXexam>div:last-child{
  flex: 0.6;
  display: flex;
  flex-direction: column;
  border: 1px solid #000000;
}
.myZXexam_img{
  width: 200px;
  text-align: center;
  border: 1px solid #000000;
}
.myZXexam_info{
  flex: 1;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  border: 1px solid #c2c2c2;
}
.myZXexam_info>li{
  line-height: 60px;
  height: 60px;
  font-size: 20px;
  font-weight: 600;
  font-family: 华文仿宋, serif;
  display: flex;
  border: 1px solid #c7c7c7;
}
.myZXexam_info>li>div{
  flex: 1;
  padding: 0 5px;
  border: 1px solid #c2c2c2;
}
.KSinfo>li>p,
.KSinfo>li>div>p,
.myZXexam_info>li>div>p{
  color: #0084ff;
}
.KSinfo{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.KSinfo>li{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  font-size: 20px;
  font-weight: 600;
  font-family: 华文仿宋, serif;
  border: 1px solid #000000;
}
.KSinfo>li>div{
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}
.KSinfo>li>div:first-child{
  border-right: 1px solid #c2c2c2;
}
.KSinfo>li>div:last-child{
  border-left: 1px solid #c2c2c2;
}
.mypractisebut{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0,100px);
  background: linear-gradient(to top, rgba(93,93,93,0.4), rgba(199, 199, 199, 0.4));
  transition: transform .2s ease;
}

.myscrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 98%;
  margin: 10px;
  /*border: 1px solid red;*/
  text-align: center;
  border-radius: 4px;
  transition: box-shadow .2s ease;
 background: var(--el-color-primary-light-9);
}

.pjcoach_box_icon:hover{
  transform: scale(1.2);
}

.scrollbar-demo-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  width: 90%;
  margin: 10px 20px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.myscrollbar-demo-item:hover,
.scrollbar-demo-item:hover{
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.scrollbar-demo-item:hover .mypractisebut{
  transform: translate(0);
}
.scrollbar-demo-item>header{
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #d5d5d5;
  justify-content: space-between;
}
.scrollbar-demo-item>header>p{
  font-size: 27px;
  font-family: 华文仿宋, serif;
}
.scrollbar-demo-item>header>span{
  background-color: inherit;
  color: #0083fc;
  font-size: 20px;
  font-weight: 600;
  font-family: 細明體_HKSCS-ExtB, serif;
}
.scrollbar-demo-item>div{
  padding: 0 10%;
  display: flex;
  align-items: center;
  line-height: 30px;
  box-sizing: border-box;
}
.scrollbar-demo-item>div>p{
  font-weight: 600;
  border-bottom: 2px solid #d9d9d9;
}
.scrollbar-demo-item>div>span{
  background-color: inherit;
  color: #4da9ff;
  font-weight: 600;
  box-sizing: border-box;
  border-radius: 6px;
  margin:2px;
  border: 1px solid #4da9ff;
}


/**{*/
/*  border: 1px solid red;*/
/*}*/
.myscontain{
  flex: 1;
  overflow: scroll;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: white;
}
.myscard{
  flex: 0.7;
  height: 460px;
  min-width: 760px;
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
:deep(.el-tabs__nav.is-left){
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:deep(.el-tabs__header.is-left){
  width: 200px;
}
:deep(.el-tabs__item.is-left){
  font-size: 20px;
  font-family: 华文楷体,serif;

}
:deep(.el-tabs__content){
  height: 100%;
}
:deep(.el-tab-pane){
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pjcoach,
.mycoach{
  flex: 0.6;
  width: 80%;
  position: relative;
  line-height: 30px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #e4e7ed;
  transition: box-shadow .2s ease;
}
.pjcoach:hover,
.mycoach:hover{
  border: 1px solid #e4e7ed;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}
.mycoach>p,
.pjcoach_box>div{
  margin: 4px;
  color: #676767;
}
.myscard span{
  color: white;
  background-color: #4da9ff;
  padding: 1px 2px;
}
.mycoach>div:not(:last-child){
  display: flex;
  justify-content: space-between;
  border: 1px solid #eaeaea;
  font-size: 20px;
  line-height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  position: relative;
}








/* From uiverse.io by @WhiteNervosa */
.mystbut {
  font-size: 18px;
  color: #808080;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  border: none;
  margin: 10px;
  background: none;
  text-transform: uppercase;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: color;
}

.mystbut:focus,
.mystbut:hover {
  color: #000000;
}

.mystbut:focus:after,
.mystbut:hover:after {
  width: 100%;
  left: 0;
}

.mystbut:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #000000;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}

/* From uiverse.io by @mateusneves */
.mysbut{
  top: 0;left: 50%;
  transform: translate(-50%,0);
  position: relative;
  font-size: 14px;
  letter-spacing: 3px;
  height: 3em;
  padding: 0 3em;
  margin: 10px;
  border: none;
  background-color: #7c90ff;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
  border-radius: 5px
}

.mysbut::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: #7c90ff;
  background: linear-gradient(90deg, rgb(124, 144, 225) 20%, rgb(70, 104, 215) 100%);
  transition: 0.2s;
}

.mysbut .label {
  background-color: rgba(225,225,225,0);
  position: relative;
}

.mysbut .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  width: 3em;
  position: absolute;
  background-color: rgba(225,225,225,0);
  top: 3em;
  right: 0;
  opacity: 0;
  transition: 0.4s;
}

.mysbut:hover::before {
  height: 100%;
}

.mysbut:hover .icon {
  top: 0;
  opacity: 1;
}






li{
  list-style: none;
}
.myscontainer{
  flex: 1;
  margin: 0 18%;
  min-width: 600px;
  min-height: 500px;
  height: auto;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1),
  0 1px 3px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
}
.left-box{
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border-right: 1px solid red;*/
}
.left-box li{
  padding: 10px 0;
  line-height: 34px;
  color: #aaa;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  font-family: 华文楷体,serif;
  /* 过渡效果 */
  transition: 0.2s ease-out;
}
/* li选中态 */
.left-box li.active{
  color: #333;
}
.border{
  height: 500px;
  width: 1px;
  background-color: #ddd;
}
.border .line{
  width: 6px;
  height: 54px;
  background-color: #85acff;
  margin-left: -2px;
  margin-top: 35px;
  transition: 0.4s ease-in-out;
}
/* 分别设置各个红色小块的垂直位置 */
.border .line1{
  margin-top: 141px;
}
.border .line2{
  margin-top: 195px;
}
.border .line3{
  margin-top: 249px;
}
.border .line4{
  margin-top: 303px;
}
.right-box{
  flex: 1;
  height: 100%;
  position: relative;
}
.right-box .rb{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #333;
  position: absolute;
  /* 默认隐藏 */
  top: -350px;
  opacity: 0;
  transition: 0.4s ease-in-out;
}
.right-box h1{
  margin: 30px 0 40px 0;
}
.right-box p{
  padding: 0 30px;
}
/* 右侧内容区选中态 */
.right-box .rb.active{
  top: 0;
  opacity: 1;
}
.box_box{
  width: 80%;
  line-height: 28px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  font-family: 华文楷体,serif;
  border: 1px solid blue;
}
.box_box>p span{
  background-color: #8ac5ff;
  color: white;
  padding: 0 2px;
  border-radius: 2px;
}
.box_box1{
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: -250px;
  border: 1px solid blue;
}
.box_ul{
  flex: 0.9;
  width: 90%;
  border: 1px solid red;
}

/* From uiverse.io by @adamgiebl */
.myprabut{
  font-size: 18px;
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow,transform;
  background: radial-gradient( 100% 100% at 100% 0%, #89E5FF 0%, #6877c9 100% );
  box-shadow: 0 0.01em 0.01em rgb(45 35 66 / 40%), 0 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0 -0.01em 0 rgb(58 65 111 / 50%);
  padding: 0 2em;
  border-radius: 0.3em;
  color: #fff;
  height: 2.6em;
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.myprabut:hover {
  box-shadow: 0 0.1em 0.2em rgb(45 35 66 / 40%), 0 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0 -0.1em 0 #3c4fe0;
  transform: translateY(-0.1em);
}

.myprabut:active {
  box-shadow: inset 0 0.1em 0.6em #3c4fe0;
  transform: translateY(0em);
}

</style>